<template>
  <div class="user-profile-container">
    <!-- 顶部背景区域 -->
    <div class="profile-header">
      <div class="company-info">
        <div class="avatar-container">
          <el-avatar :size="80" icon="UserFilled" />
        </div>
        <div class="company-details">
          <h2 class="company-name">杭州XXXX有限公司</h2>
          <div class="company-meta">
            <div class="meta-item">
              <span class="label">公司编号:</span>
              <span class="value">4846069151</span>
            </div>
            <div class="meta-item">
              <span class="label">所属部门:</span>
              <span class="value">xxxx部门</span>
            </div>
          </div>
        </div>
      </div>
    </div>

    <!-- 内容区域 -->
    <div class="profile-content">
      <!-- 基本信息 -->
      <div class="info-section">
        <div class="section-header">
          <div class="section-indicator"></div>
          <h3 class="section-title">基本信息</h3>
        </div>
        
        <div class="info-list">
          <div class="info-row">
            <span class="info-label">用户名称:</span>
            <span class="info-value">Administrators</span>
            <el-button class="edit-btn" type="primary" text size="small" @click="handleEditNickname">
              更换
            </el-button>
          </div>
          
          <div class="info-row">
            <span class="info-label">工号:</span>
            <span class="info-value">1001</span>
          </div>
          
          <div class="info-row">
            <span class="info-label">角色权限:</span>
            <span class="info-value">管理员</span>
          </div>
        </div>
      </div>
      
      <!-- 联系方式 -->
      <div class="info-section">
        <div class="section-header">
          <div class="section-indicator"></div>
          <h3 class="section-title">联系方式</h3>
        </div>
        
        <div class="info-list">
          <div class="info-row">
            <span class="info-label">手机号:</span>
            <span class="info-value">155xxxx6666</span>
            <el-button class="edit-btn" type="primary" text size="small" @click="handleEditPhone">
              更换
            </el-button>
          </div>
          
          <div class="info-row">
            <span class="info-label">邮箱:</span>
            <span class="info-value">15566668888@qq.com</span>
            <el-button class="edit-btn" type="primary" text size="small" @click="handleEditEmail">
              更换
            </el-button>
          </div>
        </div>
      </div>
      
      <!-- 仓库信息 -->
      <div class="info-section">
        <div class="section-header">
          <div class="section-indicator"></div>
          <h3 class="section-title">仓库信息</h3>
        </div>
        
        <div class="info-list">
          <div class="info-row">
            <span class="info-label">所属仓库:</span>
            <span class="info-value">华东杭州分仓, xx分仓, xxx分仓</span>
          </div>
        </div>
      </div>
    </div>

    <!-- 修改手机号弹窗 -->
    <el-dialog
      v-model="phoneDialogVisible"
      title="修改手机号"
      width="400px"
      :before-close="handleDialogClose"
    >
      <el-form style="margin-top: 20px;" :model="phoneForm" :rules="phoneRules" ref="phoneFormRef">
        <el-form-item label="原手机号" prop="oldPhone">
          <el-input v-model="phoneForm.oldPhone" disabled />
        </el-form-item>
        <el-form-item label="新手机号" prop="newPhone">
          <el-input v-model="phoneForm.newPhone" placeholder="请输入新手机号" />
        </el-form-item>
        <el-form-item label="验证码" prop="verificationCode">
          <div class="verification-code-container">
            <el-input v-model="phoneForm.verificationCode" placeholder="请输入验证码" />
            <el-button :disabled="isGettingCode" @click="handleGetVerificationCode">
              {{ codeButtonText }}
            </el-button>
          </div>
        </el-form-item>
      </el-form>
      <template #footer>
        <div class="dialog-footer">
          <el-button @click="handleDialogClose">取消</el-button>
          <el-button type="primary" @click="handlePhoneSubmit">确认</el-button>
        </div>
      </template>
    </el-dialog>

    <!-- 修改邮箱弹窗 -->
    <el-dialog
      v-model="emailDialogVisible"
      title="修改邮箱"
      width="400px"
      :before-close="handleEmailDialogClose"
    >
      <el-form style="margin-top: 20px;" :model="emailForm" :rules="emailRules" ref="emailFormRef">
        <el-form-item label="原邮箱" prop="oldEmail">
          <el-input v-model="emailForm.oldEmail" disabled />
        </el-form-item>
        <el-form-item label="新邮箱" prop="newEmail">
          <el-input v-model="emailForm.newEmail" placeholder="请输入新邮箱" />
        </el-form-item>
        <el-form-item label="验证码" prop="verificationCode">
          <div class="verification-code-container">
            <el-input v-model="emailForm.verificationCode" placeholder="请输入验证码" />
            <el-button :disabled="isGettingEmailCode" @click="handleGetEmailVerificationCode">
              {{ emailCodeButtonText }}
            </el-button>
          </div>
        </el-form-item>
      </el-form>
      <template #footer>
        <div class="dialog-footer">
          <el-button @click="handleEmailDialogClose">取消</el-button>
          <el-button type="primary" @click="handleEmailSubmit">确认</el-button>
        </div>
      </template>
    </el-dialog>

    <!-- 修改用户昵称弹窗 -->
    <el-dialog
      v-model="nicknameDialogVisible"
      title="修改昵称"
      width="400px"
      :before-close="handleNicknameDialogClose"
    >
      <el-form style="margin-top: 20px;" :model="nicknameForm" :rules="nicknameRules" ref="nicknameFormRef">
        <el-form-item label="原昵称" prop="oldNickname">
          <el-input v-model="nicknameForm.oldNickname" disabled />
        </el-form-item>
        <el-form-item label="新昵称" prop="newNickname">
          <el-input v-model="nicknameForm.newNickname" placeholder="请输入新昵称" />
        </el-form-item>
      </el-form>
      <template #footer>
        <div class="dialog-footer">
          <el-button @click="handleNicknameDialogClose">取消</el-button>
          <el-button type="primary" @click="handleNicknameSubmit">确认</el-button>
        </div>
      </template>
    </el-dialog>
  </div>
</template>

<script setup>
import { ref, reactive } from 'vue'
import { ElMessage } from 'element-plus'

// 手机号修改弹窗
const phoneDialogVisible = ref(false)
const phoneFormRef = ref(null)
const phoneForm = reactive({
  oldPhone: '155xxxx6666',
  newPhone: '',
  verificationCode: ''
})

// 验证规则
const phoneRules = {
  newPhone: [
    { required: true, message: '请输入新手机号', trigger: 'blur' },
    { pattern: /^1[3-9]\d{9}$/, message: '请输入正确的手机号格式', trigger: 'blur' }
  ],
  verificationCode: [
    { required: true, message: '请输入验证码', trigger: 'blur' },
    { pattern: /^\d{6}$/, message: '验证码为6位数字', trigger: 'blur' }
  ]
}

// 邮箱修改弹窗
const emailDialogVisible = ref(false)
const emailFormRef = ref(null)
const emailForm = reactive({
  oldEmail: '15566668888@qq.com',
  newEmail: '',
  verificationCode: ''
})

// 邮箱验证规则
const emailRules = {
  newEmail: [
    { required: true, message: '请输入新邮箱', trigger: 'blur' },
    { type: 'email', message: '请输入正确的邮箱格式', trigger: 'blur' }
  ],
  verificationCode: [
    { required: true, message: '请输入验证码', trigger: 'blur' },
    { pattern: /^\d{6}$/, message: '验证码为6位数字', trigger: 'blur' }
  ]
}

// 昵称修改弹窗
const nicknameDialogVisible = ref(false)
const nicknameFormRef = ref(null)
const nicknameForm = reactive({
  oldNickname: 'Administrators',
  newNickname: ''
})

// 昵称验证规则
const nicknameRules = {
  newNickname: [
    { required: true, message: '请输入新昵称', trigger: 'blur' },
    { min: 2, max: 20, message: '昵称长度在2到20个字符之间', trigger: 'blur' }
  ]
}

// 验证码按钮状态
const isGettingCode = ref(false)
const countdown = ref(60)
const codeButtonText = ref('获取验证码')

// 邮箱验证码按钮状态
const isGettingEmailCode = ref(false)
const emailCountdown = ref(60)
const emailCodeButtonText = ref('获取验证码')

// 打开修改手机号弹窗
const handleEditPhone = () => {
  phoneDialogVisible.value = true
}

// 打开修改邮箱弹窗
const handleEditEmail = () => {
  emailDialogVisible.value = true
}

// 打开修改昵称弹窗
const handleEditNickname = () => {
  nicknameDialogVisible.value = true
}

// 关闭手机号弹窗
const handleDialogClose = () => {
  phoneDialogVisible.value = false
  phoneForm.newPhone = ''
  phoneForm.verificationCode = ''
}

// 关闭邮箱弹窗
const handleEmailDialogClose = () => {
  emailDialogVisible.value = false
  emailForm.newEmail = ''
  emailForm.verificationCode = ''
}

// 关闭昵称弹窗
const handleNicknameDialogClose = () => {
  nicknameDialogVisible.value = false
  nicknameForm.newNickname = ''
}

// 获取手机验证码
const handleGetVerificationCode = () => {
  if (!phoneForm.newPhone) {
    ElMessage.warning('请先输入新手机号')
    return
  }
  
  if (!/^1[3-9]\d{9}$/.test(phoneForm.newPhone)) {
    ElMessage.warning('请输入正确的手机号格式')
    return
  }
  
  isGettingCode.value = true
  codeButtonText.value = `${countdown.value}秒后重试`
  
  const timer = setInterval(() => {
    countdown.value--
    codeButtonText.value = `${countdown.value}秒后重试`
    
    if (countdown.value <= 0) {
      clearInterval(timer)
      isGettingCode.value = false
      codeButtonText.value = '获取验证码'
      countdown.value = 60
    }
  }, 1000)
  
  ElMessage.success(`验证码已发送至${phoneForm.newPhone}`)
}

// 获取邮箱验证码
const handleGetEmailVerificationCode = () => {
  if (!emailForm.newEmail) {
    ElMessage.warning('请先输入新邮箱')
    return
  }
  
  // 简单的邮箱格式验证
  if (!/^[\w.-]+@[\w.-]+\.\w+$/.test(emailForm.newEmail)) {
    ElMessage.warning('请输入正确的邮箱格式')
    return
  }
  
  isGettingEmailCode.value = true
  emailCodeButtonText.value = `${emailCountdown.value}秒后重试`
  
  const timer = setInterval(() => {
    emailCountdown.value--
    emailCodeButtonText.value = `${emailCountdown.value}秒后重试`
    
    if (emailCountdown.value <= 0) {
      clearInterval(timer)
      isGettingEmailCode.value = false
      emailCodeButtonText.value = '获取验证码'
      emailCountdown.value = 60
    }
  }, 1000)
  
  ElMessage.success(`验证码已发送至${emailForm.newEmail}`)
}

// 提交修改手机号
const handlePhoneSubmit = () => {
  phoneFormRef.value.validate((valid) => {
    if (valid) {
      ElMessage.success('手机号修改成功')
      // 这里应该调用接口修改手机号
      phoneForm.oldPhone = phoneForm.newPhone
      handleDialogClose()
    }
  })
}

// 提交修改邮箱
const handleEmailSubmit = () => {
  emailFormRef.value.validate((valid) => {
    if (valid) {
      ElMessage.success('邮箱修改成功')
      // 这里应该调用接口修改邮箱
      emailForm.oldEmail = emailForm.newEmail
      handleEmailDialogClose()
    }
  })
}

// 提交修改昵称
const handleNicknameSubmit = () => {
  nicknameFormRef.value.validate((valid) => {
    if (valid) {
      ElMessage.success('昵称修改成功')
      // 这里应该调用接口修改昵称
      nicknameForm.oldNickname = nicknameForm.newNickname
      handleNicknameDialogClose()
    }
  })
}
</script>

<style lang="scss" scoped>
.user-profile-container {
  height: 100%;
  background-color: #f5f7fa;
}

.profile-header {
  height: 180px;
  position: relative;
  display: flex;
  align-items: center;
  padding: 0 40px;
  margin-bottom: 10px;
  background-image: url('@/assets/images/user-background-img.png');
  background-size: cover;
  background-position: center;
}

.company-info {
  display: flex;
  align-items: center;
}

.avatar-container {
  margin-right: 20px;
  
  :deep(.el-avatar) {
    border: 4px solid rgba(255, 255, 255, 0.3);
    background-color: #fff;
    color: var(--primary-color);
    font-size: 32px;
  }
}

.company-details {
  color: #000000;
}

.company-name {
  font-size: 22px;
  margin: 0 0 10px;
  font-weight: bold;
}

.company-meta {
  display: flex;
  flex-direction: column;
  gap: 15px;
}

.meta-item {
  display: flex;
  
  .label {
    opacity: 0.8;
    margin-right: 5px;
  }
  
  .value {
    font-weight: 500;
  }
}

.profile-content {
}

.info-section {
  background-color: #fff;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.05);
  padding: 20px 30px;
}

.section-header {
  display: flex;
  align-items: center;
  margin-bottom: 20px;
  position: relative;
  padding-left: 12px;
}

.section-indicator {
  width: 3px;
  height: 14px;
  background-color: #409EFF;
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
}

.section-title {
  font-size: 14px;
  font-weight: 600;
  margin: 0;
  color: #303133;
}

.info-list {
  padding: 0 10px;
}

.info-row {
  display: flex;
  align-items: center;
  line-height: 40px;
}

.info-row:last-child {
  border-bottom: none;
}

.info-label {
  width: 80px;
  color: #606266;
  font-size: 14px;
}

.info-value {
  color: #303133;
  width: 245px;
  font-size: 14px;
}

.edit-btn {
  color: var(--primary-color);
  margin-left: 10px;
  padding: 0;
  font-size: 12px;
  border: none;
  background: var(--primary-color-light);
  width: 57px;
  height: 24px;
  line-height: 24px;
}

.verification-code-container {
  display: flex;
  
  :deep(.el-input) {
    flex: 1;
    margin-right: 10px;
  }
  
  .el-button {
    width: 120px;
  }
}

.dialog-footer {
  display: flex;
  justify-content: flex-end;
}
</style> 